<template>
  <div class="common-table">
    <el-table :data='tableData' height="580" stripe>
      <el-table-column
         show-overflow-tooltip
         v-for='item in tableLabel'
         :key='item.prop'
         :label="item.label"
         :width="item.width?item.width:125">
             <!-- 插槽传入进来的数据 可以scope拿到item的数据 表头 表格数据一并渲染出来通过插槽-->
           <template slot-scope="scope">
             <span style="margin-left:10px">{{scope.row[item.prop]}}</span>
           </template>
      </el-table-column>
      <el-table-column label='操作' min-width="180">
            <template slot-scope="scope">
          <!-- scope会传出所在的row,column与$index -->
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页栏 -->
    <el-pagination
        class="pager"
        layout='prev,pager,next'
        :total='config.total'
        :current-page.sync="config.page"
        @current-change='changePage'
        :page-size="20"
    ></el-pagination>
  </div>
</template>

<script>
export default {
    name:'CommoneTable',
    props:{
      // 1.接受数据的数据名称 2.定义好的数据类型
      tableData:Array,
      tableLabel:Array,
      config:Object
    },
    data(){
      return{

      }
    },
    methods:{
      handleEdit(row){
        // 发送
          this.$emit('edit',row)
      },
      handleDelete(row){
        console.log(row.id);
          this.$emit('del',row)
      },
      changePage(){
      let page = this.config.page
      this.$emit('changePage',page)
      }
    }
}
</script>

<style lang='less' scoped>
   .common-table{
     height: calc(100%-62%);
     background-color: #fff;
     position: relative;
     .pager{
       position: absolute;
       bottom: 0;
       right: 20px;
     }
   }
</style>